<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 通过CSS 的属性来设置当前的这几个方面的尺寸
  1. 外边距 margin
  2. 内边距 padding
  3. 边框 border  -->

  <style>
    div {
      width: 200px;
      height: 100px;

      /* 设置边框  大小 颜色 实线 */
      border: 10px black solid;

      /* 边框会挤压内容,而不是撑大元素 */
      box-sizing: border-box;

      /* 内边距 */
      padding: 5px;
    }

    .one {

      /* 
      外边距 margin 在垂直方向会存在"塌陷"的情况,两个元素都设置了外边距的时候
      实际的外边距是两者的较大值,而不是相加,在水平方向不会出现(直接相加的...) 
      */
      margin-top: 20px;
    }
  </style>


  <div>这是一个元素</div>
  <div class="one">这是第二个元素</div>
</body>

</html>